<div id="root">

<h1>导航栏组件</h1>
<uinavbar  
title="标题"
@clickleft="clickLeftFn"
@clickright="clickRrightFn"
>
</uinavbar>

<h1>表单组件</h1>
<uitable @submit="submitFn"></uitable>

<h1>按钮组件</h1>
<uibutton type="primary" content="主要按钮"></uibutton>
<uibutton type="info" content="信息按钮"></uibutton>
<uibutton type="default" content="默认按钮"></uibutton>
<uibutton type="warning" content="警告按钮"></uibutton>
<uibutton type="danger" content="危险按钮"></uibutton>

<h1>loading 局部组件</h1>
<uiloading1 :status="statusLoading1"></uiloading1>
<button @click="statusLoading1 = true">显示</button>
<button @click="statusLoading1 = false">隐藏</button>

<h1>loading 全屏组件</h1>
<!-- <uiloading2 :status="statusLoading2" @close="() => statusLoading2 = false"></uiloading2> -->
<uiloading2 :status="statusLoading2" @close="data => statusLoading2 = data"></uiloading2>
<button @click="statusLoading2 = true">显示</button>

<h1>dialog对话框组件</h1>
<uidialog :status="dialogStatus" @close="data => dialogStatus = data"></uidialog>
<button @click="dialogStatus = true">显示</button>

<h1>page分页组件</h1>
<uipage :total="15" :pagesize="2" @pageclick="pageClickFn"></uipage>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./UI.css">
<script src="./UI.js"></script>


<script>

const vm = new Vue({
    el: "#root",
    data: {

        statusLoading1:false,
        statusLoading2:false,
        dialogStatus:false
    },
    methods:{
        submitFn(formData){
            // console.log("表单数据：",formData)
           alert("用户创建成功啦，提交中...") 
        },
        clickLeftFn(){
            alert("我返回啦~~~~")
        },
        clickRrightFn(){
            alert("拼命搜索中...")
        },
        pageClickFn(pageNum){
            alert(`第${pageNum}页`)
        }
    }
})
</script>